<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
.el-form-item {
    margin-bottom: 5px;
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">维修管理</el-breadcrumb-item>
                <el-breadcrumb-item>维修管理</el-breadcrumb-item>
                <div class="main-menus">
                    <el-button type="primary" icon="plus" @click="editItem({}, '新增')">新增维修申请</el-button>
                </div>
            </el-breadcrumb>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-radio-group v-model="query.status">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button
                            v-for="(item, id) in statusAlias"
                            :label="id"
                        >{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="维修类型">
                    <el-select v-model="query.type">
                        <el-option label="全部" value="all" key=""></el-option>
                        <el-option
                            v-for="item in types"
                            :label="item"
                            :value="item"
                            :key="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column width="200" prop="type" label="维修信息" inline-template>
                <div>
                     <span>维修单号：{{row.id + 10000}}</span><br/>
                     <span>单据类型：{{row.ticket_type}}</span><br/>
                     <span>维修类别：{{row.type}}</span><br/>
                </div>
            </el-table-column>
            <el-table-column label="申请人"  width="200" inline-template>
                <div>
                    <span>部门：{{row.department.name}}</span><br/>
                    <span>联系人：{{row.creator.name}}</span><br/>
                    <span>电话：{{row.phone}}</span><br/>
                </div>
            </el-table-column>
            <el-table-column label="人员" width="200" inline-template>
                <div>
                    <span>分配人：{{row.allocator.name}}</span><br/>
                    <span>维修员：{{row.repairer.name}}</span><br/>
                    <span>确认人：{{row.checker.name}}</span><br/>
                </div>
            </el-table-column>
            <el-table-column width="200" prop="description" label="维修内容"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="reason" width="120" label="退回原因"></el-table-column>
            <el-table-column width="120" label="申请时间" inline-template>
                <div>
                    <span>{{row.created_at | date}}</span>
                </div>
            </el-table-column>
            <el-table-column width="100" prop="status" label="状态" inline-template>
                <el-tag :type="statusAlias[row.status].icon">{{statusAlias[row.status].name}}</el-tag>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" @click="editItem(row, '编辑')">修改</el-button>
                    <el-button size="small" type="danger" v-if="row.status === statusMap.PENDING" @click="deleteItem(row)">删除</el-button>
                    <el-button size="small" type="success" v-if="row.status >= statusMap.ALLOCATED && row.status < statusMap.REPAIRED" @click="pushItem(row, statusMap.COMPLETED, '已维修')">确认已完成</el-button>
                    <!-- <el-button size="small" type="success" v-if="row.grand_id === 0" @click="editItem(row, 2)">新增子维修</el-button> -->
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>

        <el-dialog
            :title="editData.title"
            :visible.sync="editDialogVisible"
            size="tiny"
        >
            <el-form :model="editData">
                <el-form-item label="单据类型">
                    <el-select v-model="editData.ticket_type">
                        <el-option
                            v-for="item in ticket_types"
                            :label="item"
                            :value="item"
                            :key="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="维修类别">
                    <el-select v-model="editData.type">
                        <el-option
                            v-for="item in types"
                            :label="item"
                            :value="item"
                            :key="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-input disabled v-model="user.department.name" placeholder="输入地址"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input disabled v-model="user.name" placeholder="联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editData.phone" placeholder="联系电话"></el-input>
                </el-form-item>

                <el-form-item label="地址">
                    <el-input v-model="editData.address" placeholder="输入地址"></el-input>
                </el-form-item>
                <el-form-item label="维修内容">
                    <el-input type="textarea" rows="3" v-model="editData.description" placeholder="维修内容"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" rows="2" v-model="editData.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ListController from '../controllers/list';

import Repair from '../models/repair';
import Promise from 'bluebird';

export default new ListController({
    data() {
        return {
            ListModel: Repair,
            user: TTXS.user,
            query: {
                creator_id: TTXS.user.id,
                page_num: 1,
                page_size: 20,
                type: 'all',
                status: 'all',
            },

            statusMap: {
                PENDING: Repair.PENDING,
                ALLOCATED: Repair.ALLOCATED,
                REPAIRED: Repair.REPAIRED,
                COMPLETED: Repair.COMPLETED,
                CALLBACK: Repair.CALLBACK
            },
            statusAlias: {
                [Repair.PENDING]: {
                    icon: 'warning',
                    name: '待分配'
                },
                [Repair.ALLOCATED]: {
                    icon: 'success',
                    name: '已分配'
                },
                [Repair.REPAIRED]: {
                    icon: 'gray',
                    name: '已维修'
                },
                [Repair.CALLBACK]: {
                    icon: 'danger',
                    name: '已退回'
                },
                [Repair.COMPLETED]: {
                    icon: 'success',
                    name: '已完成'
                }
            },
            ticket_types: ['工程维修单'],
            types: ['普通维修', '紧急维修'],

            editData: {},
            editDialogVisible: false
        };
    },
    methods: {
        beforeLoadItems() {
            return Promise.all([
            ]);
        },
        debugItem(row) {
            this.$confirm('确认调试该项？')
            .then(() => {
                this.ListModel.update({
                    id: row.id,
                    status: 1
                }).$promise;
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        pullItem(row) {
            this.$confirm('确认下线该项？')
            .then(() => {
                const params = Object.assign({}, row, {
                    id: row.id,
                    status: 0
                });
                this.ListModel.update(params).$promise;
            })
            .then(() => {
                this.$message({
                    message: '下线成功！',
                    type: 'success'
                });

                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
       pushItem(row, status, msg) {
            this.$confirm('确认？' + msg)
            .then(() => {
                return this.ListModel.update({
                    id: row.id,
                    status: status
                }).$promise
                .then(() => {
                    this.loadItems();
                });
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        
        deleteItem(row) {
            this.$confirm('确认删除该维修？')
            .then(() => {
                return this.ListModel.delete({
                    id: row.id
                }).$promise;
            })
            .then(() => {
                return this.loadItems();
            })
            .catch(err => {
                throw new Error(err);
            });
        },
        editItem(row) {
            this.editDialogVisible = true;
            this.editData = Object.assign({}, {ticket_type: '', type: '', address: '', description: ''}, row);
        },
        submitEdit() {
            let params = null;
            let $submitPromise = null;

            if(this.editData.id > 0) {
                $submitPromise = this.ListModel.update(this.editData).$promise;
            }
            else {
                params = Object.assign({}, this.editData);
                $submitPromise = this.ListModel.save(params).$promise;
            }

            $submitPromise
            .then(res => {
                if(res.code && res.code !== 200) {
                    this.$message.error(res.message);
                    return;
                }
                this.editDialogVisible = false;
                this.$message({
                    message: '提交成功！',
                    type: 'success'
                });
                this.loadItems();
            })
            .catch(err => {
                this.$message.error(err);
            });
        }
    }
});
</script>
